import Logo from "@/assets/logo.png"
import WelcomeSlogan from "@/assets/welcome-txt.png"
import { useCallback, useEffect,useRef } from "react";
import { useNavigate } from "react-router-dom";
import "./welcome.scss"
function Welcome(){
  const welcomePage = useRef<HTMLDivElement>(null!);
  const navigate = useNavigate();
  useEffect(() => {
    welcomePage.current.style.opacity = "1";
    
  },[])
  const handleLoginPage = useCallback(() => {
    navigate("/login")
  },[navigate])

    return  <div className="page welcome" ref={welcomePage}>
       <img className="welcome-logo" src={Logo} alt="" />
       <h1 className="welcome-slogan">欢乐购商城</h1>

       <div className="welcome-slogan_text">
          <img src={WelcomeSlogan} alt="" />
       </div>

       <div>
          <button onClick={handleLoginPage} className="welcome-btn">立即逛逛</button>
       </div>
    </div>;
}

export default Welcome;